FallingFruit.org (and the Falling Fruit app) is a collaborative public map of wild food sources. Users add and edit records of edible plants, fungi, and even dumpsters and water wells. The system is created and run by a nonprofit and operates with minimal budget, which means visual design hasn't been a high priority in its development.

The problem: FallingFruit's design is difficult to use on mobile devices, visually uninteresting, and outdated.

To solve these issues, the goals of this redesign project were to:

First, it was critical to understand the problems facing the current design. I did this by analyzing the functionality and UI of the current website and app, creating a simple user profile, and user stories to identify which functionality is most important.

One of the first glaring issues was that the mobile version of the website (above, left) is simply a scaled-down version of the desktop site (above, right). This makes text and buttons on the mobile site very small, particularly for those with small devices, violating accessibility standards and increasing difficulty-of-use. The mobile app (above, center) has a mobile-optimized design, but looks very different from the website and has some differences in functionality as well.

Mobile web is the most convenient format for users to access this tool while out foraging, so this is the format I prioritized first in my redesign, and based all other formats on.

Users live all over the world, primarily in urban and suburban areas, and most densely in North America and Europe. They speak a number of languages and have a variety of experience levels with technology, but most use a smartphone. They are motivated by connection with nature and their communities, curiosity for the world around them, and a love of good food. They typically use FallingFruit while on the go, to search for and review existing records of wild food sources and to add new sources.

Core user stories and user flows:

Additional user stories:

     • As a visitor in a new location, I need to view details about a food source to determine whether I should go there.

     • As a frequent user, I need to edit or delete a map pin that is no longer accurate, so it can be more useful in the future.

     • As a long-term user, I need to create an account so I can record my contributions and connect across devices.

With that foundation, it was time to start designing prototypes to represent how the new design could function and how its UI would be organized. I began with paper-and-pen sketches, digitized into a low-fidelity interactive prototype in Figma, which also served as a sitemap for the site's core functionality:

I then created more refined, mid-fidelity mockups of each key screen, filled out with placeholder contents:

To establish the site's visual language, I created two possible moodboards and three possible color schemes:

The second moodboard (fresh, nourishing, simple) is less tied to a specific design trend, which gives it better longevity and international appeal. It also fit the site's past branding better, so I chose this moodboard as my inspiration and began creating full-color refined mockups. I also chose the second color scheme as it fit this moodboard best while offering flexibility. 

I used a few key screens to play with different versions of the color scheme and find patterns that look interesting, cohesive, and clean while also offering high enough contrast and readability (final version of expanded location details below, right).

While crafting the high-fidelity prototype, I also created and refined a style guide with detailed reusable components, color styles, paragraph styles, and layout grids (portions of style guide below. Full guide available here)

I worked through several rounds of iteration to create high-fidelity, pixel-perfect versions of the rest of the prototype, standardizing color, type, style, iconography, and imagery while refining functionality.

I also adapted the mobile designs of a few central screens for tablet and desktop breakpoints:

Finally, I connected the high-fidelity mockups into a live prototype in Figma, with simple animations, and created a mockup of some more complex animation possibilities the site could use for micro-interactions.

This redesign only covered the site's core functionality of viewing, creating, editing, searching for, and filtering locations on the local map. I also redesigned the site's about page. Future work could apply this visual style to the rest of the site's minor functionality and static content pages, and introduce additional functionality. 

You can explore the full redesign in Figma here. Additional examples of specific screens before and after the redesign are below (in pairs: home map, location details popup, edit location form, about page, map settings menu).

One of the greatest challenges I faced with this project was how to maintain clear, simple, accessible high-contrast visuals while using so many bold colors. It took a lot of adjustment and revision to find levels of color high enough to match the style I was aiming for, yet subtle enough to remain useful. 

Another significant lesson came from balancing the volume of information on-screen at once. This tool is intended to provide information, so users need access to a great deal of it, but providing all that information at once would be cluttered and difficult to navigate. By making the home screen very simple, and giving users multiple steps to progressively reveal more information about a location pin, I believe I was able to strike the appropriate balance.